import React, { ReactElement, useContext } from 'react';
import { View } from 'react-native';

import styles from './style';
import { Store } from '../../reducer';
import Empty from '../../../../../../components/Empty';
import Commodities from './components/Commodities';

export default (): ReactElement => {
  const { state } = useContext(Store);
  const { data } = state;
  const { demoCommodities, systemCommodities } = data;
  if (demoCommodities.length === 0 && systemCommodities.length === 0) {
    return <Empty emptyDesc="暂无商品" style={styles.empty} />;
  }
  return (
    <View style={styles.container}>
      <Commodities list={demoCommodities} desc="超值·体验课" />
      <Commodities list={systemCommodities} desc="超值·正价课" />
    </View>
  );
};
